<template>
  <div class="container">
    <div v-if="isShow" style="min-height: 500px">
      <div class="t-info">
        <i
          class="el-icon-location-outline"
          style="margin-right: 5px; font-size: 16px"
        ></i
        >电路开通进度
      </div>
      <div class="c-tab">
        <div class="u-title">
          <span class="icon"></span>流水号 : {{ CTOInfo.custSoNumber }}({{
            CTOInfo.orderItemSeq
          }})
        </div>
        <div class="tabBtn">
          <div class="active" v-for="(item, index) in areaCode" :key="index">
            {{ item.areaCodeName }}
          </div>
        </div>
      </div>
      <div class="c-info">
        <div class="c-contan">
          <p style="font-size: 16px; font-weight: 600; margin: 20px 0 10px 0">
            到单时间
          </p>
          <div>
            <div v-for="(item, index) in chartList" :key="index" class="item">
              <div class="time">{{ item.child[0].arrivedDate }}</div>
              <div class="point">
                {{ index + 1 }}
              </div>
              <div v-if="index + 1 != chartList.length" class="line"></div>
              <div class="item-right">
                <div
                  class="content"
                  style="display: flex; font-size: 14px; color: #aaaaaa"
                >
                  <div
                    style="margin-right: 20px"
                    v-for="(item1, index1) in item.child"
                    :key="index1"
                  >
                    <img
                      v-if="
                        item1.workState != undefined && item1.workState != ''
                      "
                      class="imageClass"
                      src="./imgs/icon-1.png"
                      alt=""
                    />
                    <img
                      v-else
                      class="imageClass"
                      src="./imgs/icon-2.png"
                      alt=""
                    />
                    <!-- <img
                      v-if="item1.flag == 3"
                      class="imageClass"
                      src="./imgs/icon-3.png"
                      alt=""
                    /> -->
                    <!-- <img
                      v-if="item1.flag == 4"
                      class="imageClass"
                      src="./imgs/icon-1.png"
                      alt=""
                    /> -->
                    <el-popover placement="right" width="300" trigger="hover">
                      <div
                        style="
                          width: 100%;
                          text-align: center;
                          font-size: 14px;
                          margin-bottom: 10px;
                        "
                      >
                        {{ item1.areaName }}
                      </div>
                      <p style="margin-bottom: 5px">
                        环节名称：{{ item1.tacheName }}
                      </p>
                      <p style="margin-bottom: 5px">
                        到单时间：{{ item1.arrivedDate }}
                      </p>
                      <p style="margin-bottom: 5px">
                        工单状态：{{
                          item1.isOvertime == "是"
                            ? "超时"
                            : item1.workState == "20142623002"
                            ? "按时完成"
                            : "处理中"
                        }}
                      </p>
                      <p style="margin-bottom: 5px">
                        完成时间：{{ item1.workStateDate }}
                      </p>
                      <p style="margin-bottom: 5px">
                        处理人：{{ item1.exePerson }}
                      </p>
                      <p style="margin-bottom: 5px">
                        处理明细：{{ item1.exeDetail }}
                      </p>
                      <p style="margin-bottom: 5px">
                        是否超时：{{ item1.isOvertime }}
                      </p>
                      <p style="margin-bottom: 5px">
                        联系电话：{{ item1.contactNumber }}
                      </p>
                      <el-button
                        slot="reference"
                        :style="{ background: lineColor(item1.workState) }"
                        >{{ item1.tacheName }}</el-button
                      >
                    </el-popover>
                    <!-- <el-button v-else
                        :style="{ background: lineColor(item.workState) }"
                        >{{ item.tacheName }}</el-button
                      > -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="r-info">
        <div style="margin-bottom: 30px">
          <img class="imageClass1" src="./imgs/icon-1.png" alt="" />已完成
        </div>
        <div>
          <img class="imageClass1" src="./imgs/icon-2.png" alt="" />处理中
        </div>
      </div>
    </div>
    <div v-else style="height: 500px"></div>
  </div>
</template>

<script>
import OrderService from "@/api/order/OrderService";
export default {
  props: {
    CTOInfo: {
      type: Object,
    },
  },
  data() {
    return {
      areaCode: [
        // {
        //   areaCodeName: "上海(省)",
        //   areaCode: "24",
        //   upareaCodeName: "",
        //   G_WorkItem: [
        //     {
        //       workOrderSeq: "2",
        //       preTacheName: "",
        //       tacheName: "20142620002",
        //       arrivedDate: "2021-07-07 16:11:33",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-07 16:20:00",
        //       exePerson: "陆茵",
        //       exeDetail: "",
        //       exeJob: "上海省公司国内传输定单调度",
        //       isOvertime: "",
        //       contactNumber: "021-64317470",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0013",
        //       FKTacheName: "(省)定单审核受理GNCZS",
        //       correctDetail: "",
        //     },
        //     {
        //       workOrderSeq: "3",
        //       preTacheName: "20142620002",
        //       tacheName: "20142620003",
        //       arrivedDate: "2021-07-07 16:20:12",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-07 16:20:49",
        //       exePerson: "陆茵",
        //       exeDetail: "",
        //       exeJob: "上海省公司国内传输定单调度",
        //       isOvertime: "",
        //       contactNumber: "021-64317470",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0014",
        //       FKTacheName: "(省)定单转调单GNCZS",
        //       correctDetail: "",
        //     },
        //     {
        //       workOrderSeq: "8",
        //       preTacheName: "20142620008",
        //       tacheName: "20142620012",
        //       arrivedDate: "2021-07-07 16:20:53",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-07 16:34:52",
        //       exePerson: "陆茵",
        //       exeDetail: "",
        //       exeJob: "上海省公司国内传输调单调度",
        //       isOvertime: "",
        //       contactNumber: "021-64317470",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0016",
        //       FKTacheName: "(省)调单配置及转送派单GNCZS",
        //       correctDetail: "",
        //     },
        //   ],
        // },
        // {
        //   areaCodeName: "北京(省)",
        //   areaCode: "4",
        //   upareaCodeName: "",
        //   G_WorkItem: [
        //     {
        //       workOrderSeq: "6",
        //       preTacheName: "0",
        //       tacheName: "20142620008",
        //       arrivedDate: "2021-07-07 16:35:01",
        //       workState: "20142623001",
        //       workStateDate: "",
        //       exePerson: "集团服务开通",
        //       exeDetail: "",
        //       exeJob: "北京省公司国内传输调单调度",
        //       isOvertime: "否",
        //       contactNumber: "",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0015",
        //       FKTacheName: "(省)转省内调单GNCZS",
        //       correctDetail: "",
        //     },
        //   ],
        // },
        // {
        //   areaCodeName: "上海(地市)",
        //   areaCode: "2401",
        //   upareaCodeName: "上海(省)",
        //   G_WorkItem: [
        //     {
        //       workOrderSeq: "9",
        //       preTacheName: "20142620012",
        //       tacheName: "20142620014",
        //       arrivedDate: "2021-07-07 16:35:01",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-07 16:35:03",
        //       exePerson: "系统自动",
        //       exeDetail: "",
        //       exeJob: "上海地市国内传输调度",
        //       isOvertime: "",
        //       contactNumber: "21423636",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0018",
        //       FKTacheName: "地市配置转本地网GNCZS",
        //       correctDetail: "",
        //     },
        //     {
        //       workOrderSeq: "13",
        //       preTacheName: "0",
        //       tacheName: "201712040007",
        //       arrivedDate: "2021-07-07 16:35:06",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-12 17:41:36",
        //       exePerson: "王峥",
        //       exeDetail: "单点报竣：总头接入已通知用户时隙",
        //       exeJob: "上海地市国内传输调度",
        //       isOvertime: "否",
        //       contactNumber: "21423636",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0019",
        //       FKTacheName: "本地网回单GNCZS",
        //       correctDetail: "",
        //     },
        //     {
        //       workOrderSeq: "16",
        //       preTacheName: "0",
        //       tacheName: "20142620023",
        //       arrivedDate: "2021-07-07 16:35:06",
        //       workState: "20142623002",
        //       workStateDate: "2021-07-12 17:41:36",
        //       exePerson: "王峥",
        //       exeDetail: "单点报竣：总头接入已通知用户时隙",
        //       exeJob: "上海地市国内传输调度",
        //       isOvertime: "否",
        //       contactNumber: "21423636",
        //       contactEmail: "",
        //       FKTachCode: "GN-2008078005-0019",
        //       FKTacheName: "本地网回单GNCZS",
        //       correctDetail: "",
        //     },
        //   ],
        //   P_WorkItem: [
        //     {
        //       workOrderSeq: "10",
        //       workState: "20142623002",
        //       arrivedDate: "",
        //       workStateDate: "2021-07-08 14:17:37",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620014",
        //       tacheName: "20142620016",
        //     },
        //     {
        //       workOrderSeq: "11",
        //       workState: "20142623002",
        //       arrivedDate: "2021-07-08 14:17:37",
        //       workStateDate: "2021-07-08 15:00:16",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620016",
        //       tacheName: "20142620017",
        //     },
        //     {
        //       workOrderSeq: "12",
        //       workState: "20142623002",
        //       arrivedDate: "2021-07-08 15:00:16",
        //       workStateDate: "2021-07-08 15:00:16",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620017",
        //       tacheName: "20142620018",
        //     },
        //     {
        //       workOrderSeq: "12",
        //       workState: "20142623002",
        //       arrivedDate: "2021-07-08 15:00:16",
        //       workStateDate: "2021-07-08 15:00:16",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620017",
        //       tacheName: "20142620019",
        //     },
        //     {
        //       workOrderSeq: "13",
        //       workState: "20142623002",
        //       arrivedDate: "2021-07-08 15:00:16",
        //       workStateDate: "2021-07-08 15:00:16",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620019",
        //       tacheName: "20142620020",
        //     },
        //     {
        //       workOrderSeq: "14",
        //       workState: "20142623002",
        //       arrivedDate: "2021-07-08 15:00:16",
        //       workStateDate: "2021-07-12 15:18:09",
        //       exePerson: "李萍",
        //       exeOperatePhone: "021-52128927",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620020",
        //       tacheName: "20142620021",
        //     },
        //     {
        //       workOrderSeq: "15",
        //       workState: "",
        //       arrivedDate: "",
        //       workStateDate: "",
        //       exePerson: "",
        //       exeOperatePhone: "",
        //       exeDetail: "",
        //       prefecturePerson: "",
        //       preTacheName: "20142620021",
        //       tacheName: "20142620022",
        //     },
        //   ],
        // },
      ],
      chartListName: [
        { name: "定单审核", code: "20142620001" },
        { name: "定单受理", code: "20142620002" },
        { name: "定单转调单", code: "20142620003" },
        { name: "配置骨干网/省网资源", code: "20142620004" },
        { name: "调单派发", code: "20142620005" },
        { name: "国内骨干网网管配置", code: "20142620006" },
        { name: "国际骨干网网管配置", code: "20142620007" },
        { name: "转省内调单", code: "20142620008" },
        { name: "转海外公司调单", code: "20142620009" },
        { name: "省公司配置资源", code: "20142620010" },
        { name: "海外公司配置资源", code: "20142620011" },
        { name: "省内派单", code: "20142620012" },
        { name: "海外公司派单", code: "20142620013" },
        { name: "转本地网", code: "20142620014" },
        { name: "省网管配置", code: "20142620015" },
        { name: "定单关联", code: "20142620016" },
        { name: "资源勘查", code: "20142620017" },
        { name: "设备采购", code: "20142620018" },
        { name: "管线施工", code: "20142620019" },
        { name: "外线施工", code: "20142620020" },
        { name: "业务调试", code: "20142620021" },
        { name: "竣工交付", code: "20142620022" },
        { name: "地市公司报俊", code: "20142620023" },
        { name: "海外公司报俊", code: "20142620024" },
        { name: "全程调测", code: "20142620025" },
        { name: "全程报俊", code: "20142620026" },
        { name: "资源分配", code: "20142620027" },
        { name: "调单配置资源/派单", code: "20142620028" },
        { name: "资源分配报俊", code: "20142620029" },
        { name: "网管配置", code: "20142620030" },
        { name: "省公司报俊", code: "20142620031" },
        { name: "服开派单", code: "20152620001" },
        { name: "IDC资源调度", code: "20152620002" },
        { name: "IDC资源施工", code: "20152620003" },
        { name: "IDC资源审核", code: "20152620004" },
        { name: "IDC资源向省内派单", code: "20152620005" },
        { name: "IDC资源回单", code: "20152620006" },
        { name: "服开报竣", code: "20152620007" },
        { name: "本地网回单", code: "201712040007" },
        { name: "95集团政支订单审核", code: "20182620008" },
        { name: "95集团网元施工", code: "20182620009" },
        { name: "95集团MNOC派单", code: "20182620010" },
        { name: "95送智能网管", code: "20182620011" },
        { name: "95集团MNOC回单", code: "20182620012" },
        { name: "95上海NOC回单", code: "20182620013" },
        { name: "95省服开回单", code: "20182620014" },
        { name: "翼翮定单审核", code: "20182620015" },
        { name: "云接入资源分配", code: "20182620016" },
        { name: "三层VPN资源分配申请", code: "20182620017" },
        { name: "云端配置任务下发", code: "20182620018" },
        { name: "三层VPN DCI配置下发", code: "20182620019" },
        { name: "PE端A端单点报竣", code: "20182620020" },
        { name: "CE端A端单点报竣", code: "20182620021" },
        { name: "云全程调测发起", code: "20182620022" },
        { name: "云平台客户VPC资源查询", code: "20182620023" },
        { name: "DCI 网络三层VPN完工报竣", code: "20182620024" },
        { name: "DCI云间高速云调系统交维报竣信息通知", code: "20182620025" },
        { name: "DCI电子运维系统交维报竣信息通知", code: "20182620026" },
        { name: "翼翮全程报竣", code: "20182620027" },
        { name: "二层VLL资源分配申请", code: "20182620028" },
        { name: "云端A端配置任务下发", code: "20182620029" },
        { name: "云端Z端配置任务下发", code: "20182620030" },
        { name: "DCI网络二层VLL业务开通", code: "20182620031" },
        { name: "PE端Z端单点报竣", code: "20182620032" },
        { name: "CE端Z端单点报竣", code: "20182620033" },
        { name: "DCI 网络二层VLL完工报竣", code: "20182620034" },
        { name: "CN2网络三层VPN资源反写（派发）", code: "20182620001" },
        { name: "三层VPN CN2配置下发", code: "20182620002" },
        { name: "CN2 网络三层VPN完工报竣", code: "20182620003" },
        { name: "CN2云间高速云调系统交维报竣信息通知", code: "20182620004" },
        { name: "CN2电子运维系统交维报竣信息通知", code: "20182620005" },
        { name: "CN2网络二层VPN资源反写（派发）", code: "20182620006" },
        { name: "CN2网络二层VLL业务开通", code: "20182620007" },
        { name: "CN2 网络二层VLL完工报竣", code: "20182620008" },
        { name: "资源确认", code: "20192620001" },
        { name: "光网系统回单", code: "20192620002" },
        { name: "A端MSS回单", code: "20192620003" },
        { name: "Z端MSS回单", code: "20192620004" },
        { name: "骨干建采回单", code: "20192620005" },
        { name: "传输综合网管系统回单", code: "20192620006" },
        { name: "一次报竣", code: "20192620007" },
        { name: "预约受理", code: "20192620008" },
        { name: "A端省预通知", code: "20192620009" },
        { name: "Z端省预通知", code: "20192620010" },
        { name: "A端省单点报竣", code: "20192620011" },
        { name: "Z端省单点报竣", code: "20192620012" },
        { name: "全程报竣", code: "20192620013" },
        { name: "CN2网络三层VPN资源反写（报竣）", code: "20192620014" },
        { name: "CN2网络二层VPN资源反写（报竣）", code: "20192620015" },
        { name: "统一库配置", code: "20192010016" },
        { name: "接入资源分配", code: "20192010017" },
        { name: "云资源分配", code: "20192010018" },
        { name: "省资源分配报竣", code: "20192010019" },
        { name: "省激活报竣", code: "20192010020" },
        { name: "overlay配置", code: "20192010021" },
        { name: "省外线报竣", code: "20192010022" },
        { name: "ITMS上报事件通知", code: "20192010023" },
        { name: "A8-C配置", code: "20192010024" },
        { name: "端到端测试", code: "20192010025" },
        { name: "统一库报竣", code: "20192010026" },
        { name: "编排器报竣", code: "20192010027" },
        { name: "服开报竣", code: "20192010028" },
      ],
      chartList: [], //数据重组排序后的数据
      isShow: false,
    };
  },

  components: "",

  computed: "",

  mounted() {
    this.getProgrssChart();
  },
  methods: {
    //获取开通进度信息
    async getProgrssChart() {
      let parmas = {
        custId: this.CTOInfo.custId,
        productId: this.CTOInfo.prodId,
        orderItemId: this.CTOInfo.orderItemId,
      };
      const result = await OrderService.qryDianluOpenProgress(parmas);
      if (result.code == 200) {
        if (result.meta.requestObject.Circuit_Info) {
          let circuit_Info = result.meta.requestObject.Circuit_Info;
          if (circuit_Info instanceof Array) {
            circuit_Info.forEach((item) => {
              if (item.areaCode) {
                this.areaCode.push.apply(this.areaCode, item.areaCode);
              }
            });
          } else {
            if (circuit_Info.areaCode instanceof Array) {
              this.areaCode.push.apply(this.areaCode, circuit_Info.areaCode);
            } else {
              this.areaCode.push(circuit_Info.areaCode);
            }
          }
          this.handleData();
        } else {
          if (result.meta.requestObject.Success.SuccessFlag == 0) {
            this.$message.error(
              result.meta.requestObject.Success.InterfaceError
            );
          }
        }
      }
    },
    handleData() {
      let areaList = Object.assign([], this.areaCode);
      areaList.forEach((item) => {
        if (item.G_WorkItem != undefined) {
          if (item.G_WorkItem instanceof Array) {
            item.G_WorkItem.forEach((item1) => {
              item1["areaName"] = item.areaCodeName;
              this.chartList.push(item1);
            });
          } else {
            item.G_WorkItem["areaName"] = item.areaCodeName;
            this.chartList.push(item.G_WorkItem);
          }
        }
        if (item.P_WorkItem != undefined) {
          if (item.P_WorkItem instanceof Array) {
            item.P_WorkItem.forEach((item2) => {
              item2["areaName"] = item.areaCodeName;
              this.chartList.push(item2);
            });
          } else {
            item["areaName"] = item.areaCodeName;
            this.chartList.push(item.P_WorkItem);
          }
        }
      });
      this.chartList.sort(this.sortList("workOrderSeq")); //排序方法
      //对workOrderSeq相同的对象信息放进数组里
      let dataInfo = {};
      this.chartList.forEach((item) => {
        let { workOrderSeq } = item;
        if (!dataInfo[workOrderSeq]) {
          dataInfo[workOrderSeq] = {
            workOrderSeq,
            child: [],
          };
        }
        dataInfo[workOrderSeq].child.push(item);
      });
      this.chartList = Object.values(dataInfo); // chartList 转换成功的数据
      //有数据信息显示流程
      for (let i = 0; i < this.chartList.length; i++) {
        for (let j = 0; j < this.chartList[i].child.length; j++) {
          this.chartListName.find((obj) => {
            if (obj.code == this.chartList[i].child[j].tacheName) {
              this.chartList[i].child[j].tacheName = obj.name;
            }
          });
        }
      }
      if (this.chartList.length > 0) {
        this.isShow = true;
      }
    },
    //对数据进行排序
    sortList(workOrderSeq) {
      return function (object1, object2) {
        var value1 = object1[workOrderSeq];
        var value2 = object2[workOrderSeq];
        if (Number(value1) < Number(value2)) {
          return -1;
        } else if (Number(value1) > Number(value2)) {
          return 1;
        } else {
          return 0;
        }
      };
    },
    //渲染颜色
    lineColor(flag) {
      if (flag != "") {
        return "#3dae66";
        // } else if (flag == 2) {
        //   return "#f3c669";
      } else {
        // return "#c7c7c7";
        return "#f3c669";
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.t-info {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  padding-left: 10px;
  margin-top: 20px;
  background-color: #89d8ff;
}
.tabBtn {
  display: flex;
  width: 100%;
  justify-content: center;
}
// .tabBtn .active:first-child {
//   margin-left: 1.5rem;
// }
.u-title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}
.icon {
  float: left;
  display: block;
  width: 4px;
  height: 15px;
  background: #89d8ff;
  margin-top: 3px;
  margin-right: 10px;
  font-size: 14px;
}
.active {
  height: 30px;
  line-height: 30px;
  min-width: 2rem;
  background-color: #89d8ff;
  border-color: #89d8ff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  margin-right: 30px;
}
.c-contan {
  width: 70%;
  margin: 0 auto;
}
.item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-content: center;
  position: relative;
  height: 86px;
}
.point {
  width: 30px;
  height: 30px;
  line-height: 27px;
  text-align: center;
  border: 3px solid #89d8ff;
  border-radius: 50%;
}
.line {
  position: absolute;
  left: 143px;
  top: 30px;
  width: 3px;
  height: 58px;
  background: #e4e7ed;
}
.item-right {
  margin-left: 14px;
  margin-top: -2px;
  width: 80%;
}
.time {
  margin-top: 3px;
  font-size: 13px;
  width: 1.625rem;
}
.imageClass {
  position: relative;
  top: 2px;
  width: 24px;
  height: 24px;
  margin-right: 5px;
}
.imageClass1 {
  position: relative;
  width: 24px;
  height: 24px;
  bottom: 2px;
  margin-right: 5px;
}
.el-button {
  color: #fff;
}
.r-info {
  position: fixed;
  right: 100px;
  top: 50%;
  font-size: 16px;
}
</style>